I have a NodeList of button elements numbers. I want each of the elements listen to keydown event in respective to their own textContent.
When I use document.addEventHandlers("keydown", function), it works fine.
Method 1:
document.addEventListener("keydown", (e)=>{
numbers.forEach(number=>{
if (number.textContent === e.key){
addNumber(number)
}})})
However, it stops working when I use this instead:
Method 2:
numbers.forEach(number=>number.addEventListener("keydown", (e)=>{
if (number.textContent === e.key){
addNumber(number);
}}))
The first method seems not efficient to me since it has to make comparison to every items in numbers everytime "keydown" is fired. Can anyone tell me why the method 2 don't work as method 1?
If the problem is the performance, you can map your numbers in a map/dictionary with their textContent as a key and the number object as a value. Then:
document.addEventListener("keydown", (e) => {
var number = numbersByKey[e.Key];
if (number)
addNumber(number);
})
document.addEventListener("keydown", (e)=>{
numbers.forEach(number=>{
if (number.textContent === e.key){
addNumber(number)
}})})
In the above code, you are adding a keydown listener for the document itself, so whenever you press a key on the keyboard, this event is fired.
numbers.forEach(number=>number.addEventListener("keydown", (e)=>{
if (number.textContent === e.key){
addNumber(number);
}}))
In this code, you are adding a keydown listener to the individual element, so only if the element is focused the keydown event will be fired for that element